<template>
  <div class="app-container">
    开发中....
  </div>
</template>
<script>
import Cropper from "cropperjs";
import "cropperjs/dist/cropper.css";
export default {
  data() {
    return {
      onOff: false,
      returnPicPath: [],
      cropper: {},
      //   cropedImage: "",
      afterImg: "",
      num: 0,
      //   option: {
      //     showCropedImage: false,
      //   },
      imgData: {
        accept: "image/jpeg, image/png, image/jpg, image/bmp",
      },
    };
  },
  created() {
    this.$nextTick(() => {
      this.getCropper();
    });
  },
  methods: {
    getCropper() {
      let img = this.$refs.cropimg;
      this.cropper = new Cropper(img, {
        // 裁剪框的宽高比
        aspectRatio: 9/16,
        // 定义cropper的拖拽模式
        dragMode: "move",
        // 添加额外的元素(容器)以供预览
        preview: "#preview",
        // 在调整窗口大小后恢复裁剪的区域
        restore: false,
        // 裁剪框在图片正中心
        center: false,
        // 在裁剪框上方显示白色的区域(突出裁剪框)
        highlight: true,
        // 是否通过拖拽来移动剪裁框
        cropBoxMovable: true,
        // 当点击两次时可以在“crop”和“move”之间切换拖拽模式
        toggleDragModeOnDblclick: false,
        movable: true,
        viewMode: 1,
        //是否自动显示裁剪框
        autoCrop: true
      });
    },
    sureSava() {
      this.afterImg = this.cropper
        .getCroppedCanvas({
          imageSmoothingQuality: "high",
        })
        .toDataURL("image/jpeg");
    },
    handleChange(e) {
      let file = e.target.files[0];
      let reader = new FileReader();
      reader.onload = () => {
        this.cropper.replace(reader.result);
        // console.log(reader.result, 1111);
        reader.onload = null;
      };
      reader.readAsDataURL(file);
    },
    handleReset() {
      if (document.getElementById("fileinput").files[0]) {
        this.cropper.reset();
      }
    },
    valChange(val) {
      if (document.getElementById("fileinput").files[0]) {
        this.cropper.setData({ rotate: val });
      }
    },
  },
};
</script>
<style scoped lang="scss">
.uploadPic {
  .head {
    width: 100%;
    height: 34px;
    background: rgba(234, 235, 236, 1);
    box-shadow: 0px 2px 0px 0px rgba(204, 204, 204, 0.5);

    .title {
      text-align: left;
      line-height: 34px;
      padding-left: 11px;
    }

    .close {
      display: block;
      position: absolute;
      width: 15px;
      height: 15px;
      top: 11px;
      right: 11px;
      background-size: 15px 15px;
      background-repeat: no-repeat;
      background-position: center;
      cursor: pointer;
    }
  }

  .content {
    padding: 14px;
    width: 100%;
    float: left;
    .contentTop {
      width: 100%;
      height: 50px;

      .filelabel {
        width: 90px;
        height: 30px;
        display: inline-block;
        border: 1px solid #2d8cf0;
        border-radius: 2px;
        cursor: pointer;
        color: white;
        font-size: 14px;
        text-align: center;
        transition: all 0.2s;
        line-height: 30px;
        font-weight: 400;
        background: #00aaa4;
        box-sizing: border-box;

        &:hover {
          background: #00bdb8;
          border: 1px solid #00bdb8;
          transition: all 0.2s;
        }
      }
    }

    .contentCenter {
      width: 100%;
      display: flex;
      .left {
        width: 800px;
        height: 500px;

        .cropper {
          width: 100%;
          height: 100%;
          box-sizing: border-box;
          border: 1px solid #c3c3c3;
          width: 100%;
          height: 100%;

          img {
            max-height: 100%;
          }
        }
      }

      .right {
        width: 150px;
        border: 1px solid #c3c3c3;

        #preview {
          width: 150px;
          overflow: hidden;
        }
      }
    }

    .contentBottom {
      padding-top: 20px;
      width: 100%;

      .left {
        .btn {
          display: inline-block;
          background-color: #00aaa4;
          width: 30px;
          height: 30px;
          background: rgba(0, 170, 164, 1);
          border: 1px solid #2d8cf0;
          border-radius: 2px;
          cursor: pointer;
          text-align: center;
          transition: all 0.2s;
          margin-right: 10px;

          &:hover {
            background: #00bdb8;
            border: 1px solid #00bdb8;
            transition: all 0.2s;
          }
        }
      }

      .right {
        .btn {
          display: inline-block;
          width: 90px;
          height: 30px;
          background: rgba(0, 170, 164, 1);
          border-radius: 2px;
          font-size: 14px;
          font-weight: 400;
          color: rgba(255, 255, 255, 1);
          line-height: 30px;
          text-align: center;
          margin-right: 33px;
          cursor: pointer;

          &:hover {
            background: #00bdb8;
            transition: all 0.2s;
          }
        }
      }
    }
  }
}
</style>
